<template>
  <div class="login_bg">
    <div class="login_adv" style="background-image: url(img/auth_banner.jpg)">
      <transition
        enter-active-class="animate__animated animate__fadeInRight"
        appear
      >
        <div class="login_adv__title">
          <h2>{{ $config.APP_NAME }}</h2>
          <h4>{{ t('login.slogan') }}</h4>
        </div>
      </transition>
      <div class="login_adv__bottom">
        Copyright © {{ $config.Year }} {{ $config.Author }}版权所有
      </div>
    </div>
    <div class="login_main">
      <div class="login_config">
        <el-button
          :icon="data.config.dark ? 'el-icon-moon' : 'el-icon-sunny'"
          circle
          type="info"
          @click="configDark"
        ></el-button>
        <el-dropdown
          trigger="click"
          placement="bottom-end"
          @command="configLang"
        >
          <!-- circle是否为圆形按钮 -->
          <el-button circle>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              aria-hidden="true"
              role="img"
              width="1em"
              height="1em"
              preserveAspectRatio="xMidYMid meet"
              viewBox="0 0 512 512"
            >
              <path
                d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
                fill="currentColor"
              />
              <path
                d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
                fill="currentColor"
              />
            </svg>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in data.lang"
                :key="item.value"
                :command="item"
                :class="{ selected: data.config.lang == item.value }"
              >
                {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <transition enter-active-class="animate__animated animate__zoomIn" appear>
        <div class="login-form">
          <div class="login-header">
            <div class="logo">
              <label>{{ $config.APP_NAME }}</label>
            </div>
            <h2>{{ t('login.signInTitle') }}</h2>
          </div>
          <el-form
            ref="loginForm"
            :model="data.ruleForm"
            :rules="data.rules"
            label-width="0"
            size="large"
          >
            <el-form-item prop="user">
              <el-input
                v-model="data.ruleForm.user"
                prefix-icon="el-icon-user"
                clearable
                :placeholder="t('login.userPlaceholder')"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="data.ruleForm.password"
                prefix-icon="el-icon-lock"
                clearable
                show-password
                :placeholder="t('login.PWPlaceholder')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100%"
                :loading="data.islogin"
                round
                @click="login"
              >
                {{ t('login.signIn') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入类型
import { loginForm } from './types';
//引入一些自定义的组件
import { useUserStore } from '@/store/modules/userStore';
//引入第三方组件
import { inject, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { GlobalStore } from '@/store';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
//引入api
import userApi from '@/api/user/index';
import loginApi from '@/api/auth/index';
//引入参数
import type { AccountInfo, AuthUserFormDto } from '@/api/auth/types';
import { getTimeState } from '@/utils/util';
import { HOME_URL } from '@/config/index';
import { initDynamicRouter } from '@/router/modules/dynamicRouter';
//定义变量
const store = useUserStore();
const globalStore = GlobalStore();
const router = useRouter();
var { t, locale } = useI18n();
const tool = inject('$TOOL') as any;
const $config = inject('$CONFIG') as any;
var loginForm = ref();
let data = reactive<loginForm>({
  userType: 'admin',
  ruleForm: {
    user: '',
    password: '',
    autologin: false,
  },
  rules: {
    user: [
      {
        required: true,
        message: t('login.userError'),
        trigger: 'blur',
      },
    ],
    password: [
      {
        required: true,
        message: t('login.PWError'),
        trigger: 'blur',
      },
    ],
  },
  islogin: false,
  config: {
    lang: tool.data.get('APP_LANG') || $config.LANG,
    dark: tool.data.get('APP_DARK') || false,
  },
  lang: [
    {
      name: '简体中文',
      value: 'zh-cn',
    },
    {
      name: 'English',
      value: 'en',
    },
  ],
});

//方法
//切换白天/黑夜模式
const configDark = () => {
  data.config.dark = data.config.dark ? false : true;
};
//监听白天/黑夜模式
watch(
  () => data.config.dark,
  (val) => {
    if (val) {
      document.documentElement.classList.add('dark');
      tool.data.set('APP_DARK', true);
    } else {
      document.documentElement.classList.remove('dark');
      tool.data.remove('APP_DARK', true);
    }
  }
);

//切换语言
const configLang = (command: any) => {
  data.config.lang = command.value;
};
watch(
  () => data.config.lang,
  (val) => {
    locale.value = val;
    tool.data.set('APP_LANG', val);
  }
);
//登录
const login = async () => {
  data.islogin = true;
  let formdata: AuthUserFormDto = {
    userName: data.ruleForm.user,
    password: data.ruleForm.password,
  };
  let user: AccountInfo = (await loginApi.token.post(formdata)).data;

  data.islogin = false;
  //将用户基本信息提交到store中保存
  store.setUserSecret(user.userInfo);
  globalStore.setToken(user.token);
  //登录成功则将token赋值到localstorage中
  tool.data.set('TOKEN', user.token);
  await initDynamicRouter();

  // 4.跳转到首页
  router.push(HOME_URL);

  ElNotification({
    title: getTimeState(),
    message: '欢迎登录 Net-Admin',
    type: 'success',
    duration: 3000,
  });
  // 获取菜单
  // const userMenu = await userApi.userMenus.post();
  //获取菜单成功
  // if (userMenu.length == 0) {
  //   data.islogin = false;
  //   ElMessageBox.alert(
  //     '当前用户无任何菜单权限，请联系系统管理员',
  //     '无权限访问',
  //     {
  //       type: 'error',
  //       center: true,
  //     }
  //   );
  //   return false;
  // }
  // //成功获取菜单 赋值
  // tool.data.set('MENU', userMenu);

  // router.replace({
  //   path: '/',
  // });
  // data.islogin = false;
};
</script>

<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  /* background: #fff; */
  display: flex;
}

.login_adv {
  width: 33.33333%;
  background-color: #555;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.login_adv__title {
  color: #fff;
  padding: 40px;
}

.login_adv__title h2 {
  font-size: 40px;
}

.login_adv__title h4 {
  font-size: 18px;
  margin-top: 10px;
  font-weight: normal;
}

.login_adv__title p {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}

.login_adv__title div {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.login_adv__title div span {
  margin-right: 15px;
}

.login_adv__title div i {
  font-size: 40px;
}

.login_adv__title div i.add {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.login_adv__bottom {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #fff;
  padding: 40px;
  background-image: linear-gradient(transparent, #000);
}

.login_main {
  flex: 1;
  overflow: auto;
  display: flex;
}

.login-form {
  width: 400px;
  margin: auto;
  padding: 20px 0;
}

.login-header {
  margin-bottom: 20px;
}

.login-header .logo {
  display: flex;
  align-items: center;
}

.login-header .logo img {
  width: 35px;
  height: 35px;
  vertical-align: bottom;
  margin-right: 10px;
}

.login-header .logo label {
  font-size: 24px;
}

.login-header h2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
}

.login-oauth {
  display: flex;
  justify-content: space-around;
}

.login-form .el-divider {
  margin-top: 40px;
}

.login_config {
  position: absolute;
  top: 20px;
  right: 20px;
}

.el-dropdown-menu__item.selected {
  color: var(--el-color-primary);
}

@media (max-width: 1200px) {
  .login-form {
    width: 340px;
  }
}

@media (max-width: 1000px) {
  .login_main {
    display: block;
  }

  .login-form {
    width: 100%;
    padding: 20px 40px;
  }

  .login_adv {
    display: none;
  }
}
</style>
